<template>
  <div>
    <div class="xs">
      <span class="more">更多秒杀</span>
      <div class="time"></div>
    </div>
    <div class="seckill">
      <div class="sectitle"></div>
      <div class="seckilltime" ref="sto">
        <div
          v-for="(item , index ) in arr"
          :key="index"
          :class="{'active':active == index}"
          @click="activeFn(index , item)"
          ref="bg"
        >
          <p class="time">{{item.sj}}</p>
          <p class="zuo">{{text(item.is)}}</p>
        </div>
      </div>
    </div>
    <div class="shoops">
      <seckill :options="options"></seckill>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
export default {
  name: "slip",
  data() {
    return {
      active: 0,
      options: {},
    };
  },
  methods: {
    ...mapActions("home", ["getRules"]),
    text(is) {
      if (is == 0) {
        // 0 今天  1 明天  2 昨天
        return "抢购中";
      } else if (is == 1) {
        return "预热中";
      } else if (is == 2) {
        return "昨日精选";
      } else {
        return "正在秒杀";
      }
    },
    formatDate() {
      let date = new Date();
      //设置时间转换格式
      var y = date.getFullYear(); //获取年
      var m = date.getMonth() + 1; //获取月
      m = m < 10 ? "0" + m : m; //判断月是否大于10
      var d = date.getDate(); //获取日
      d = d < 10 ? "0" + d : d; //判断日期是否大10
      return y + "-" + m + "-" + d; //返回时间格式
    },
    activeFn(index, item) {
      // 点击切换滚动距离
      this.active = index;
      let wid = this.$refs.bg[0].offsetWidth;
      var marginRight = this.getStyle(this.$refs.bg[0], "marginRight");
      let rig = marginRight.substr(0, marginRight.length - 2) * 1;
      this.$refs.sto.scrollLeft = (index - 2) * (wid + rig);

      // 拿数据
      this.options = item;
    },
    getStyle(obj, attr) {
      if (obj.currentStyle) {
        return obj.currentStyle[attr];
      } else {
        return document.defaultView.getComputedStyle(obj, null)[attr];
      }
    },
  },
  computed: {
    ...mapState("home", ["rulesArr"]),
    arr() {
      // console.log(this.rulesArr);
      let sj = this.formatDate();
      let arr = [];
      this.rulesArr.forEach((v) => {
        let timer = v.time.split("--");
        // console.log(timer);
        let s1 = timer[0].substr(timer[0].length - 2, timer[0].length) * 1;
        let s2 = timer[1];
        let s3 = sj.substr(sj.length - 2, sj.length) * 1;
        if (s1 == s3) {
          // 0 今天  1 明天  2 昨天
          arr.push({ is: 0, ...v, sj: s2 });
        } else if (s1 > s3) {
          arr.push({ is: 1, ...v, sj: s2 });
        } else if (s1 < s3) {
          arr.push({ is: 2, ...v, sj: s2 });
        }
      });
      let h = new Date().getHours();
      arr.reverse();
      arr.map((v, i) => {
        if (v.is == 0) {
          let t = v.sj.substr(0, 2) * 1;
          if (t <= h && h < t + 2) {
            this.active = i;
            return (v.is = 9);
          }
        }
      });

      if (arr.length && !arr.some((v) => v.is == 9)) {
        console.log(arr[0]);
        this.active = 1;
        arr[1].is = 9;
      }

      return arr;
    },
  },
  mounted() {
    this.getRules();
  },
  watch: {
    active(e) {
      if (e) {
        this.activeFn(this.active, this.arr[e]);
      }
    },
  },
};
</script>

<style scoped>
.xs {
  padding: 0.1rem 0.2rem 0 0.2rem;
  height: 1rem;
  line-height: 1rem;
}

.more {
  float: right;
  font-size: 0.25rem;
  color: #ea4141;
}

.xs .time {
  overflow: hidden;
  font-size: 0.3rem;
  height: 100%;
  font-weight: 700;
}

.xs .time:before {
  content: "";
  display: inline-block;
  width: 2.6rem;
  height: 1rem;
  background: url("https://img.miyabaobei.com/d1/p5/2018/08/07/b8/f5/b8f5d8b859eb15b82feab4b98c27ad38333479784.png")
    left center no-repeat;
  background-size: 2rem 0.4rem;
}

.seckilltime {
  height: 1rem;
  background-color: #f5f5f5;
  overflow: hidden;
  overflow-x: auto;
  white-space: nowrap;
}

.seckilltime::-webkit-scrollbar {
  display: none;
}

.seckilltime > div {
  width: 1.2rem;
  height: 0.8rem;
  padding: 0.1rem;
  box-sizing: border-box;
  display: inline-block;
  text-align: center;
  margin-right: 0.5rem;
  line-height: 0.35rem;
  margin-top: 0.1rem;
}

.time {
  font-weight: bolder;
  font-size: 0.3rem;
}

.zuo {
  font-size: 0.25rem;
  color: #cccccc;
}

.active .time {
  background-color: #ea4141;
  border-radius: 20px;
  color: #f5f5f5;
}

.active .zuo {
  font-size: 0.25rem;
  color: #ea4141;
}
</style>